import React from "react";
import ReactDOM from "react-dom/client";

/**
 * getSnapshotBeforeUpdate   Snapshot 快照（记录）    - beforeUpdate
 * 在更新之前获取快照（上一次真实DOM的快照）
 *
 *    1. 你要么不写它，要写它就必须同时实现 componentDidUpdate
 *    2. componentDidUpdate 接收的 第三个参数，就是我 getSnapshotBeforeUpdate 返回的
 *    3. 必须有返回值或者null
 *    4. 执行时机：
 *        render 之后，componetDidUpdate 之前。
 *        在此可以获取真实DOM更新之前的一些真实DOM数据
 *    5. 接收两个参数
 *
 *        prevProps   更新之前的props
 *        prevState   更新之前的state
 */

class Hello extends React.PureComponent {
  state = {};

  getSnapshotBeforeUpdate(prevProps, prevState) {
    console.log("Hello - getSnapshotBeforeUpdate", prevProps, prevState);
    return 123;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    console.log("Hello - componentDidUpdate", snapshot);
  }

  render() {
    console.log("Hello - render");
    const firstName = this.props.name.split("")[0];
    const lastName = this.props.name.split("")[1];
    return (
      <div>
        <h1>Hello, {this.props.name}</h1>
        <p>你的姓：{firstName}</p>
        <p>你的名：{lastName}</p>
      </div>
    );
  }
}

class App extends React.Component {
  state = {
    person: {
      name: "张三",
      age: 18,
    },
  };

  render() {
    console.log("App - render");
    return (
      <div>
        <h1>App</h1>
        <p>姓名：{this.state.person.name}</p>
        <p>年龄：{this.state.person.age}</p>

        <button
          onClick={() => {
            this.setState({
              person: {
                ...this.state.person,
                name: "李四",
              },
            });
          }}
        >
          修改姓名为李四
        </button>

        <button
          onClick={() => {
            this.setState({
              person: {
                ...this.state.person,
                age: 20,
              },
            });
          }}
        >
          修改年龄为20
        </button>

        <Hello name={this.state.person.name} />
      </div>
    );
  }
}

const root = ReactDOM.createRoot(document.querySelector("#root"));
root.render(<App />);
